<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>clunch.js - 用例测试</title>
    <script src="../../../dist/clunch-template.js"></script>
    <link rel="shortcut icon" href="../../../clunch.png">
    <style>
        body {
            margin: 0;
        }

        #root {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>

    <div id="root">

        <ui-demo c-on:dblclick='doit'></ui-demo>

    </div>

    <script>

        Clunch.series('ui-demo', ['number', function ($number) {
            return {
                attrs: {
                    // cx: $number()
                },
                region: {
                    default: function (render, attr) {

                        render(0, {
                            info: "保存起来的数据"
                        }).fillRect(0, 0, 300, 300);

                    }
                },
                link: function (painter, attr) {

                    painter.config({
                        // 'xxx':'非法的画笔配置'
                    });

                    // 测试阴影
                    painter.config({
                        "shadowBlur": 50,
                        "shadowColor": "red"
                    }).fillCircle(100, 100, 50);

                    // 复用圆形
                    this.$reuseSeriesLink('circle', {
                        attr: {
                            cx: 100,
                            cy: 100,
                            radius: 100,
                            type: 'stroke',
                            dash: [10, 20]
                        }
                    });

                    // 复用路径
                    this.$reuseSeriesLink('path', {
                        attr: {
                            'stroke-color': 'blue',
                            'line-width': 10
                        },
                        subSeries: [
                            {
                                name: "move-to",
                                attr: {
                                    x: 0,
                                    y: 0
                                }
                            }, {
                                name: "line-to",
                                attr: {
                                    x: 300,
                                    y: 300
                                }
                            }
                        ]
                    });

                    // 复用文字
                    this.$reuseSeriesLink('text', {
                        attr: {
                            x: 300,
                            y: 300,
                            "fill-color": 'red'
                        },
                        texts: ['你好呀']
                    });

                }
            };
        }]);

        window.clunch = new Clunch({
            el: document.getElementById('root'),
            data: function () {
                return {

                };
            },
            methods: {
                doit(target) {
                    console.log(target);
                }
            }
        }).$bind('click', function (target) {
            console.error(target);
        });


    </script>

</body>

</html>
